<template>
  <card title="其他">
    <section class="item">
        <h3 class="title">生成有序ID</h3>
      <el-input style="width:450px" placeholder="请输入内容" v-model="guid" ref="$guidInput">
        <template slot="prepend">
          <y-button label="生成" @click="getGuid"></y-button>
        </template>
        <template slot="append">
          <y-button label="复制" @click="copyGuid"></y-button>
        </template>
      </el-input>
    </section>
    
  </card>
</template>

<script>
export default {
    data(){
        return {
            guid:''
        }
    },
    methods:{
        async getGuid(){
            var { data } = await this.$y.api.develop.guid.get()
            this.guid = data
        },
        copyGuid(){
            this.$refs.$guidInput.select()
            document.execCommand('copy')
        }
    }
}
</script>


<style lang="scss" scoped>
.item{
    margin-bottom: 30px;
    .title{
    font-weight: 400;
    color: #1f2f3d;
    font-size: 22px;
    margin-bottom: 20px;
}
}

</style>